<style>
    .plugin-userinfo .userInfo_box {
        width: 90%;
        margin: 20px auto 0;
        padding: 10px;
        color: #3a87ad;
        background: #d9edf7;
        border-color: #c6e4f3;
    }

    .plugin-userinfo .userInfo_box h2 {
        margin-bottom: 20px;
    }

    .plugin-userinfo .userInfo_box p {
        line-height: 30px;
    }

    .userInfo_logout {
        width: 94%;
        margin: 20px auto 0;
    }
</style>
{include file='header'/}
<body class="pear-container pear-admin">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="pluginTable" lay-filter="pluginTable"></table>
    </div>
</div>

<script type="text/html" id="pluginTableToolbar">
    <button class="layui-btn layui-btn-sm layui-bg-black" data-title="会员信息"
            onclick="plugin_userinfo()">
        <i class="layui-icon layui-icon-user"></i>
        <span class="plugin-nickname"></span>
    </button>
</script>

<script type="text/html" id="install">
    {{# if(!d.installed){ }}
    <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="install('{{ d.name }}','{{ d.version }}')">
        安装
    </button>
    {{# }else{ }}
    {{# if(d.installed < d.version){ }}
    <button class="layui-btn layui-btn-xs layui-btn-success"
            onclick="upgrade('{{ d.name }}','{{ d.version }}','{{ d.title }}','{{ d.last_data }}','{{ d.last_desc }}')">
        升级
    </button>
    {{# } }}
    {{# if(d.name !== "admin"){ }}
    <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="uninstall('{{ d.name }}','{{ d.installed }}')">
        卸载
    </button>
    {{# } }}
    {{# } }}
</script>

<!--<div id="plugin-userinfo" class="plugin-userinfo">
    <h2>温馨提醒</h2>
    你好！xianrenqh
    当前你已经登录，将同步保存你的购买记录
</div>-->


<div id="upgrade-overlay" class="upgrade-overlay"></div>
<div id="upgrade-popup" class="upgrade-popup">
    <div id="upgrade-closePopupBtn" class="upgrade-closePopupBtn">
        <i></i>
    </div>
    <h3 id="upgrade-plugin-title"></h3>
    <div class="upgrade-box">
        <div class="upgrade-box-title">
            <h2>发现新的版本！</h2>
        </div>
        <div class="upgrade-box-date">
            <p>最新版本: <span id="upgrade-lastvsrsion"></span></p>
            <p>更新时间：<span id="upgrade-lasttime"></span></p>
        </div>
        <div class="clearfix"></div>
        <div class="upgrade-box-desc">

        </div>
        <input type="hidden" id="upgrade-name-input">
        <input type="hidden" id="upgrade-version-input">
        <div class="upgrade-box-btn">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius upgrade-closePopupBtn">
                忽略本次更新
            </button>
            <button type="button" class="layui-btn layui-btn-radius" id="upgradeTrue">立即更新</button>
        </div>
    </div>
</div>
</body>
{include file='footer'/}
<script>
  const SELECT_API = "/app/admin/plugin/list";
  const AUTH_URL = "/app/admin/plugin/login";
  const PAY_URL = "/app/admin/plugin/pay";

  layui.use(["table", "form", "common", "popup"], function () {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.$;
    let common = layui.common;

    // 表头参数
    let cols = [
      {
        title: "名称",
        field: "name",
        templet: function (d) {
          return '<a target="_blank" href="https://www.xiaohuihui.club/app/view/' + d.name + '">' + d.title + '</a>';
        },
      }, {
        title: "作者",
        field: "author",
        width: 180,
        align: "center"
      }, {
        title: "价格",
        field: "price",
        width: 100,
        align: "center"
      }, {
        title: "当前版本",
        field: "installed",
        width: 100,
        align: "center"
      }, {
        title: "操作",
        field: "installed",
        templet: "#install",
        width: 180,
        align: "center"
      }
    ];

    var tableInit = table.render({
      elem: "#pluginTable",
      toolbar: '#pluginTableToolbar',
      defaultToolbar: [{
        title: "刷新",
        layEvent: "refresh",
        icon: "layui-icon-refresh",
      }, "filter", "print", "exports"],
      url: SELECT_API,
      page: true,
      cols: [cols],
      skin: "line",
      size: "lg",
      autoSort: false,
    });

    table.on("toolbar(" + tableInit.config.id + ")", function (obj) {
      get_userinfo();
      if (obj.event === "refresh") {
        layui.huiAdmin.refreshTable(tableInit.config.id, 1);
      }
    })

    // 获取会员信息
    window.get_userinfo = function () {
      $.ajax({
        url: "/app/admin/plugin/userinfo",
        type: "POST",
        dataType: "json",
        data: {},
        success: function (res) {
          if (res.code === 200) {
            $('.plugin-nickname').html(res.data.nickname + "【已登录】");
            sessionStorage.setItem("plugin_userInfo", JSON.stringify(res.data));
          } else {
            $('.plugin-nickname').html("会员信息【请登录】");
          }
        }
      })
    }
    get_userinfo();

    // 会员信息弹窗
    window.plugin_userinfo = function () {
      let userInfo = JSON.parse(sessionStorage.getItem("plugin_userInfo"));
      if (userInfo) {
        let getUserInfoCont1 = '<div class="plugin-userinfo">';
        getUserInfoCont1 += '<div class="userInfo_box">';
        getUserInfoCont1 += '<h2>温馨提示</h2>\n';
        getUserInfoCont1 += '<p>用户名：' + userInfo.username + '</p>';
        getUserInfoCont1 += '<p>昵&emsp;称：' + userInfo.nickname + '</p>';
        getUserInfoCont1 += '</div>';
        getUserInfoCont1 += '<div class="userInfo_logout">';
        getUserInfoCont1 += '<button class="layui-btn layui-btn-danger" onclick="plugin_logout()">退出登录</button>';
        getUserInfoCont1 += '</div>';
        getUserInfoCont1 += '</div>';
        layer.open({
          type: 1,
          title: "会员信息",
          shade: 0.1,
          area: [common.isModile() ? "100%" : "500px", common.isModile() ? "100%" : "400px"],
          content: getUserInfoCont1,
          closeBtn: 2,
          yes: function (index, layero, that) {

          }
        });
        return;
      } else {
        layer.open({
          type: 2,
          title: "登录 xiaohuihui.club 官网",
          shade: 0.1,
          area: [common.isModile() ? "100%" : "500px", common.isModile() ? "100%" : "450px"],
          content: AUTH_URL,
          end: function () {
            get_userinfo();
          }
        });
      }
    }

    // 退出登录
    window.plugin_logout = function () {
      $.post("/app/admin/plugin/logout", {}, function (res) {
        get_userinfo();
        sessionStorage.removeItem("plugin_userInfo");
        layer.closeAll("page");
      })
    }

    // 升级
    window.upgrade = function (name, version, title, date, description) {
      $('#upgrade-plugin-title').html(title);
      $('#upgrade-lastvsrsion').html("v" + version);
      $('#upgrade-lasttime').html(date);
      $('.upgrade-box-desc').html(description);
      $('#upgrade-name-input').val(name);
      $('#upgrade-version-input').val(version);
      $('#upgrade-overlay').show();
      $('#upgrade-popup').show();
    };
    $('.upgrade-closePopupBtn').click(function () {
      $('#upgrade-overlay').hide();
      $('#upgrade-popup').hide();
    });

    $('#upgradeTrue').click(function () {
      let name = $('#upgrade-name-input').val();
      let version = $('#upgrade-version-input').val();
      install(name, version);
    })

    window.install = function (name, version) {
      let loading = layer.load();
      $.ajax({
        url: "/app/admin/plugin/install",
        type: "POST",
        dataType: "json",
        data: {name, version},
        success: function (res) {
          // 需要登录官网
          switch (res.code) {
            case 0:
              return layui.popup.success(res.msg, function () {
                parent.location.reload();
              });
            case -1:
              layer.open({
                type: 2,
                title: "登录 xiaohuihui.club 官网",
                shade: 0.1,
                area: [common.isModile() ? "100%" : "500px", common.isModile() ? "100%" : "450px"],
                content: AUTH_URL,
                end: function () {
                  get_userinfo();
                }
              });
              return;
            case -2:
              layer.open({
                type: 2,
                title: "购买插件",
                shade: 0.1,
                area: [common.isModile() ? "100%" : "500px", common.isModile() ? "100%" : "95%"],
                content: PAY_URL + '?app=' + name
              });
              return;
            default:
              return layui.popup.failure(res.msg);
          }
        },
        complete: function () {
          layer.close(loading);
        }
      });
    }

    window.uninstall = function (name, version) {
      layer.confirm("确定卸载?", {
        icon: 3,
        title: "提示"
      }, function (index) {
        layer.close(index);
        let loading = layer.load();
        $.ajax({
          url: "/app/admin/plugin/uninstall",
          type: "POST",
          dataType: "json",
          data: {name, version},
          success: function (res) {
            if (res.code) {
              return layui.popup.failure(res.msg);
            }
            return layui.popup.success("卸载成功", function () {
              parent.location.reload();
            });
          },
          complete: function () {
            layer.close(loading);
          }
        });
      });
    }
  })
</script>
